import HistoryRoute from "./history-route";
class VueRouter {
  constructor(options) {
    this.mode = 'hash';
    this.routes = [];
    this.merge(options);
    this.routesMap = this.createMap(this.routes);
    // 保存当前路径
    this.history = { current: null }
    this.init();
  }
  init() {
    if (this.mode === 'hash') {
      // 刷新页面如果没有hash，就跳转到 #/
      if (!location.hash) {
        location.hash = '/';
      }
      window.addEventListener('DOMContentLoaded', () => {
        console.log('load');
        this.history.current = location.hash.slice(1);
      });
      window.addEventListener('hashchange', function () {
        console.log('hashchange');
        this.history.current = location.hash.slice(1);
      });
    } else {
      if (!location.pathname) {
        location.pathname = '/';
      }
      window.addEventListener('DOMContentLoaded', () => {
        this.history.current = location.pathname;
      });
      window.addEventListener('popstate', function () {
        this.history.current = location.pathname;
      });
    }
  }
  
  createMap(routes) {
    return routes.reduce((memo, curr) => {
      memo[curr.path] = curr.component;
      return memo;
    }, {});
  }
  
  go() {
  
  }
  back() {
  
  }
  path() {
  
  }
  
  
  merge(options) {
    if (options) {
      for (let key in options) {
        this[key] = options[key];
      }
    }
    return this;
  }
}

VueRouter.install = function (Vue, options) {
  // console.log(Vue, options);
  Vue.mixin({
    beforeCreate() {
      if (this.$options && this.$options.router) {  // main.js里的根实例
        this._root = this;
        this._router = this.$options.router;
        
        // 使history对象下的所有属性变成响应式的
        Vue.util.defineReactive(this, 'aaa', this._router.history);
      } else {  // 后代组件
        // 这样所有后代组件都能拿到this._root._router
        this._root = this.$parent._root;
      }
      console.log('----', this.$options.name);  // main App
      // Vue.set只能用于响应式对象
      Object.defineProperties(this, {
        $router: {
          get() {
            return this._root._router;
          }
        },
        $route: {
          get() {
            return { current: this._root.aaa.current };
          }
        }
      });
    }
  });
  Vue.component('router-link', {
    props: {
      to: String,
      tag: {
        type: String,
        default: 'a'
      },
    },
    methods: {
      handleClick() {
        console.log('handleClick');
      }
    },
    render() {
      const mode = this._self._root._router.mode;
      const tag = this.tag;
      return (
        <tag
          on-click={this.handleClick}
          href={mode === 'hash' ? `#${this.to}` : this.to}>{this.$slots.default}
        </tag>
      );
    }
  });
  Vue.component('router-view', {
    render(h) {
      // render函数中this._self就是根组件
      const current = this._self._root._router.history.current;
      const routeMap = this._self._root._router.routesMap;
      console.log('current', current, routeMap);
      return h(routeMap[current]);
    }
  });
}

export default VueRouter;